import React from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

export default function PreventingTransitionsExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">From</Link>
          </li>
          <li>
            <Link to="/one">One</Link>
          </li>
          <li>
            <Link to="/two">Two</Link>
          </li>
        </ul>
        <Route path="/" exact component={Form} />
        <Route path="/one" render={() => <h3>One</h3>} />
        <Route path="/two" render={() => <h3>Two</h3>} />
      </div>
    </Router>
  )
}

class Form extends React.Component {
  state = { isBlocking: false }

  render() {
    let { isBlocking } = this.state

    return (
      <form onSubmit={event => {
        event.preventDefault()
        event.target.reset()
        this.setState({
          isBlocking: false
        })
      }}>

        <Prompt when={isBlocking} message={location =>
          `Are you sure you want to go to ${location.pathname}`} />
        <p>
          Blocking?{" "}
          {isBlocking ? "Yes, click a link or the book button" : "Nope"}
        </p>

        <p>
          <input size="50" placeholder="type something to block transitions"
            onChange={event => {
              this.setState({ isBlocking: event.target.value.length > 0 })
              }
            } />
        </p>
        <p>
          <button>Submit to stop blooking</button>
        </p>
      </form>
    )
  }
}